<template>
    <div class="container">
        <div class="login-header">
            <img src="../assets/img/cover.7f9a695.jpg" alt="">
        </div>
        <div class="login-main">
            <div class="main">
                <div class="login">
                    <button :class="{'con':flag}" @click="flag=true">验证码登录</button>
                    <button :class="{'con':!flag}" @click="flag=false">密码登录</button>
                </div>
                <div class="from" :class="{'active':!flag}">
                    <div class="item">
                        <input type="text" placeholder="请输入手机号" v-model="phone">
                    </div>
                    <div class="item">
                        <input type="text" placeholder="请输入验证码" v-model="code">
                        <button @click="getCode">获取验证码</button>
                    </div>
                    <div class="botton">
                        <button @click="submit">登录</button>
                    </div>
                </div>



                <div class="from" :class="{'active':flag}">
                    <div class="item ">
                        <input type="text" placeholder="请输入手机号" v-model="phone">
                    </div>
                    <div class="item">
                        <input type="password" placeholder="密码" v-model="password">
                        <p>6-18位，可使用数字/英文／特殊字符</p>
                    </div>
                    <div class="botton">
                        <button @click="submits">登录</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import { getCaptchaSent, } from "../api/login.js"
export default {
    data() {
        return {
            flag: true,
            phone: "",
            password: "",
            code: "",
        };
    },
    methods: {
        //获取验证码

        // 获取验证码
        getCode() {
            console.log(this);
            // 1.验证手机号码
            let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

            if (!reg.test(this.phone)) {//不正确处理
                this.$toast("手机号码错误");
                return;
            }

            // 2.请求数据接口
            getCaptchaSent({ phone: this.phone }).then(data => {
                console.log(data);
                if (data.data) {
                    this.$toast("验证码发送成功");
                } else {
                    this.$toast("验证码发送失败,请检查手机号码")
                }
            })
        },
        //验证码登录
        submit() {
            // 1.验证手机号码
            let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            // 3.验证码
            let code = /^[0-9]{4}$/;

            if (!reg.test(this.phone)) {
                this.$toast("请输入正确的手机号码");
                return;
            }
            if (!code.test(this.code)) {//不正确处理
                this.$toast("请输入正确手机号码与密码");
                return;
            }


            console.log("成功");

            // getCaptchaVerify({"phone":this.phone,"captcha":this.code}).then(data=>{
            //    console.log("验证码验证==>",data);
            //    if(!data.data){//失败提示
            //        this.$toast("请输入正确手机号码与密码");
            //        return;
            //    }


            window.localStorage.setItem("token", "token值");
            window.localStorage.setItem("userId", "13123123");
            this.$toast("登陆成功");
            this.$router.push("/home");




        },
        //密码登录
        submits() {
            // 1.验证手机号码
            let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            // 2.验证密码
            let pass = /^[a-zA-Z0-9]\w{8,17}$/;
            if (!reg.test(this.phone) || !pass.test(this.password)) {//不正确处理
                this.$toast("请输入正确手机号码与密码");
                return;
            }
            console.log("成功");

            // getCaptchaVerify({ "phone": this.phone, "captcha": this.code }).then(data => {
            //     console.log("验证码验证==>", data);
            //     if (!data.data) {//失败提示
            //         this.$toast("请输入正确手机号码与密码");
            //         return;
            //     }
                window.localStorage.setItem("token", "token值");
                window.localStorage.setItem("userId", "13123123");
                this.$toast("登陆成功");
                this.$router.push("/home");


                // 请求用户名密码
                // getLoginCellphone({ phone: this.phone, password: this.password }).then(data => {
                //     console.log("登陆成功==>", data);
                //     if (data.code == 200) {
                //         window.localStorage.setItem("token", data.token);
                //         window.localStorage.setItem("userId", data.profile.userId)
                //         this.$toast("登陆成功");
                //         this.$router.push("/home")
                //     } else {
                //         this.$toast("请输入正确手机号码与密码");
                //         console.log("1111");
                //     }
                // })
            }
        }
    }


</script>

<style lang="scss">

.login-header {
    width: 100%;
    height: 255px;

    img {
        width: 100%;
        height: 100%;
    }
}

.login-main {
    width: 100%;

    .main {
        width: 90%;
        height: 300px;
        margin: 0 auto;
        border-radius: 3px;
        border-top-left-radius: 20px;
        background-color: #fff;
        position: relative;
        top: -55px;
        box-shadow: 0 0 6px #eee;

        .login {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;

            .con {
                color: #0fd1a2;
                position: relative;
            }

            .con::after {
                content: "";
                width: 30px;
                height: 4px;
                display: block;
                position: absolute;
                bottom: -8px;
                left: 20px;
                background: linear-gradient(270deg, #ffd100, rgba(255, 209, 0, 0));
            }

            button {
                border: none;
                font-size: 15px;
                background-color: #fff;
                font-weight: 600;

            }
        }

        .active {
            display: none;
        }

        .from {
            margin-top: 30px;

            .item {
                width: 90%;
                height: 45px;
                margin: 0 auto;
                margin-bottom: 10px;
                border: 1px solid #f1f1f3;
                position: relative;
                display: flex;

                input {
                    width: 30%;
                    height: 100%;
                    border: none;
                    font-size: 15px;
                    padding-left: 5px;

                }

                p {
                    font-size: 10px;
                    text-align: center;
                    line-height: 45px;
                    color: #999999;
                }

                ::-webkit-input-placeholder {
                    color: #caced9;
                }

                button {
                    font-size: 15px;
                    border: none;
                    background-color: #fff;
                    color: #b6b1ab;
                    position: absolute;
                    top: 12px;
                    right: 20px;
                }
            }
        }

        .botton {
            width: 90%;
            height: 48px;
            margin: 0 auto;
            margin-top: 30px;

            button {
                width: 100%;
                height: 100%;
                border-radius: 20px;
                background-color: #b3f1e0;
                color: #fff;
                text-align: center;
                line-height: 48px;
                border: none;
            }
        }
    }
}
</style>